// --------- 全局变量 ---------
// 定义基准字体相关样式
@base_font_size: calc(var(--base_px) * 40);
@base_font_family: Microsoft YaHei;
@base_font_weight: 500;
@base_font_color: #ffffff;
// @base_media-min-width: calc( var(--base_px) * 1500);

:root {
  // 基础
  // --layer_animation_name: slideLeft;
  --base_px: 100vw / 7680;
  --header_height: calc(var(--base_px) * 213);
  --footer_height: calc(var(--base_px) * 40);
  // 字号
  --font_size_timer: calc(var(--base_px) * 40);
  --font_size_text: @base_font_size;
  --font_size_number: calc(@base_font_size + (var(--base_px) * 2));
  --font_size_iconfont: calc(var(--base_px) * 40);
  --font_size_title: calc(var(--base_px) * 48);
  // 字体
  --font_family_text: @base_font_family;
  --font_family_number: @base_font_family;
  // 颜色
  --font_hover_color: yellow;

  --font_size_normal: 44px;
}

body {
  // --------- 设置基准字体样式 ---------
  font-size: @base_font_size;
  font-family: @base_font_family;
  font-weight: @base_font_weight;
  color: @base_font_color;
  //overflow: hidden;
  user-select: none;
  padding: 0;
  margin: 0;
}

.ant-message-notice-content {
  padding: 20px 40px;

  svg {
    width: 40px;
    height: 40px;
  }

  font-size: 50px;
}

// 根据屏幕宽度计算字体大小
.calculate-font-size(@min-font-size, @max-font-size) {
  font-size: unit((@min-font-size + (@max-font-size - @min-font-size) * (var(--base_px))), px);
}

// 公共面板样式
.common-panel {
  width: 100%;
  height: 100%;

  .common-panel-title {
    width: 100%;
    height: calc(var(--base_px) * 25);
    line-height: calc(var(--base_px) * 25);
    background: url("../images/panels/common/panel-bg-top.png") no-repeat;
    background-size: 100% 100%;
    text-align: left;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .common-panel-title-block {
      display: flex;
      justify-content: start;
      align-items: center;
      margin-left: calc(var(--base_px) * 10);

      .icon {
        width: calc(var(--base_px) * 15);
        height: calc(var(--base_px) * 10);
        background: url("../images/panels/common/panel-bg-top-icon.png") no-repeat;
        background-size: 100% 100%;
      }

      .desc {
        height: calc(var(--base_px) * 30);
        line-height: calc(var(--base_px) * 30);
        background: linear-gradient(0deg, #a5faff 0%, #ffffff 33%, #fff2a9 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #deebff;
        font-family: Source Han Sans CN;
        font-weight: 700;
        font-size: var(--font_size_title);
      }
    }

    .common-panel-title-options {
      display: flex;
      justify-content: end;
      align-items: center;
      margin-right: calc(var(--base_px) * 10);

      >div {
        height: calc(var(--base_px) * 20);
        line-height: calc(var(--base_px) * 20);
        margin-right: calc(var(--base_px) * 5);
        font-size: var(--font_size_text);
        cursor: pointer;
        user-select: none;

        &:hover {
          color: var(--font_hover_color);
        }
      }
    }
  }

  .common-panel-content {
    width: 100%;
    height: calc(100% - (var(--base_px) * 25));
    background: url("../images/panels/common/panel-bg-content.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;

    .common-panel-block {
      width: 96% !important;
      height: 95% !important;
      margin: calc(var(--base_px) * 3) auto !important;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;
    }
  }
}

// --------- 滚动条样式 ---------
::-webkit-scrollbar-button {
  height: 0;
  width: 0;
  display: none;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: calc(var(--base_px) * 5);
  width: calc(var(--base_px) * 5);
  background: transparent;
  border-radius: calc(var(--base_px) * 4);
}

::-webkit-scrollbar-thumb {
  padding-top: calc(var(--base_px) * 100);
  -webkit-box-shadow: inset calc(var(--base_px) * 1) calc(var(--base_px) * 1) 0 rgba(172, 211, 214, 0.1),
    inset calc(var(--base_px) * -1) calc(var(--base_px) * -1) 0 rgba(0, 0, 0, 0.07);
  background-color: rgba(4, 189, 250, 0.35);
  min-height: calc(var(--base_px) * 28);
  border-radius: calc(var(--base_px) * 4);
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset calc(var(--base_px) * 1) calc(var(--base_px) * 1) calc(var(--base_px) * 1) rgba(70, 242, 228, 0.25);
  background-color: rgba(14, 234, 237, 0.5);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset calc(var(--base_px) * 1) calc(var(--base_px) * 1) calc(var(--base_px) * 1) rgba(70, 242, 228, 0.35);
  background-color: rgba(4, 211, 248, 0.6);
}